<template>
  <div class="view" id="login">
    <div class="bgColor"></div>
    <article class="loginInterface">
      <div class="login-minbox">
        <div class="logoWrap">
          <p>账号登录</p>
          <p></p>
        </div>
        <el-form
          ref="loginForm"
          :model="formData"
          size="mini"
          :rules="rules"
          label-width="100px"
          label-position="top"
          hide-required-asterisk
        >
          <el-form-item label="" prop="account">
            <el-input
              type="text"
              clearable
              v-model="formData.account"
              autocomplete="off"
              placeholder="请输入账号"
            >
              <p slot="prefix" class="loginImg-box">
                <img src="@/assets/img/loginImg1.png" alt="" />
              </p>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input
              type="password"
              clearable
              show-password
              v-model="formData.password"
              autocomplete="off"
              placeholder="请输入密码"
            >
              <p slot="prefix" class="loginImg-box">
                <img src="@/assets/img/loginImg2.png" alt="" />
              </p>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="log-footer">
          <el-button
            type="primary"
            key="登录"
            @click="login"
            class="log-Btnbox"
          >
            登录
          </el-button>
          <p>资源管理平台</p>
        </div>
      </div>
    </article>
    <p class="footer" @click="websiteBtn">©2025-2028 版权所有 技术支持： 成都贝图科技有限公司</p>
    <Load></Load>
  </div>
</template>
<script>
import Load from '@/components/Loading2/index.vue'
import { authorityTree } from '../../router/homerouter/index'
import langSlider from '@/utils/slider-min.js'

export default {
  components: {
    Load
  },
  data() {
    return {
      dialogVisible: false, // 验证码弹框
      catcha: {
        blocky: 0,
        imgurl: '',
        miniimgurl: '',
        text: '向右滑动完成拼图',
        h: 200,
        w: 350,
        sh: 45,
        sw: 55,
        modifyImg: ''
      }, // 图片验证码传值

      formData: {
        account: '',
        password: '',
        captcha: '',
        key_str: ''
      },
      authCode: {
        img: '',
        key: '',
        sensitive: false
      },
      rules: {
        account: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            validator: this.$elValidator?.password,
            trigger: 'blur'
          }
        ]
        // captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      responseData: {}
    }
  },
  created() {
    this.getSlider()
    this.$route.params.action === 'refresh' && location.reload()
    localStorage.removeItem('token')
    localStorage.removeItem('authorityTree')
    document.onkeypress = ev => {
      ev.key === 'Enter' && this.login()
    }
  },
  destroyed() {
    document.onkeypress = null
  },
  computed: {},
  methods: {
    captcha() {
      // 清除菜单缓存状态
      sessionStorage.removeItem('childIndex')
      sessionStorage.removeItem('parentIndex')

      let that = this
      // 根据 poster 获取验证参数
      // 以下注释为请求接口返回数据，可自行替换自己的请求方法是
      new langSlider({
        title: '请完成安全验证',
        start: function (Slider) {
          // 请求滑块参数
          const res = that.responseData
          Slider.sliderStart({
            sliderBg: res.img,
            sliderKey: res.key,
            sliderY: res.y !== 0 ? res.y : 1
          })
        },
        check: async function (sliderKey, sliderX, Slider) {
          that.formData.captcha = sliderX
          that.formData.key_str = sliderKey
          try {
            let res = await that.request({
              url: '/admin/login/login',
              method: 'post',
              loading: false,
              // loadingText: '登录中...',
              data: {
                ...that.formData
              }
            })

            if (res.code == 200) {
              Slider.sliderSuccess()

              setTimeout(() => {
                Slider.closeBox()
                localStorage.setItem(
                  'token',
                  JSON.stringify({ ...res.content, permission: undefined })
                )
                sessionStorage.setItem(
                  'token',
                  JSON.stringify({ ...res.content, permission: undefined })
                )

                localStorage.setItem('ismodifypwd', res.content.is_modify_pwd)
                let permission = JSON.stringify(res.content.permission);//线上
                // console.log(res.content.permission);
                // let permission = JSON.stringify(authorityTree) //本地路由
                permission = permission.replace(
                  /"children":\[]/g,
                  '"children":null'
                )

                localStorage.setItem('authorityTree', permission)
                that.addRouterTree()
                
                // 答题模式 翻一翻模式
                const { answer_activity_gift_type, turn_activity_gift_type } = res.content
                if(answer_activity_gift_type?.length===1){
                  this.$ispacket = answer_activity_gift_type?.toString()
                }else{
                  this.$ispacket = ''
                }
                if( +this.$ispacket === 1){
                  this.$ispacket = '2'
                }else if(+this.$ispacket === 2){
                  this.$ispacket = '1'
                }
                localStorage.setItem('ispacket',this.$ispacket)
                if(turn_activity_gift_type?.length===1){
                  this.$ispacket2 = turn_activity_gift_type?.toString()
                }else{
                  this.$ispacket2 = ''
                }
                if( +this.$ispacket2 === 1){
                  this.$ispacket2 = '2'
                }else if(+this.$ispacket2 === 2){
                  this.$ispacket2 = '1'
                }
                localStorage.setItem('ispacket2',this.$ispacket2)

                that.pageTurn('/')
              }, 1500)
            }
          } catch (err) {
            let error = err.message.split('/')
            const res = await that.getSlider()
            // 207是验证失败
            if (error[0] == 207) {
              if (res) {
                Slider.sliderError({
                  sliderBg: res.img,
                  sliderKey: res.key,
                  sliderY: res.y !== 0 ? res.y : 1
                })
              }
            } else {
              Slider.sliderSuccess()
              setTimeout(() => {
                that.errorHandler(err)
                Slider.closeBox()
              }, 500)
            }
          }
        },
        refresh: async function (Slider) {
          const res = await that.getSlider()
          Slider.sliderRefresh({
            sliderBg: res.img,
            sliderKey: res.key,
            sliderY: res.y !== 0 ? res.y : 1
          })
        }
      })
    },
    // 滑动验证码
    async getSlider() {
      try {
        let res = await this.request({
          url: '/slideVerify/getCaptcha',
          method: 'get',
          loading: false,
          data: {}
        })
        this.responseData = res.content
        this.formData.key_str = res.content.key
        let response = res.content
        return response
      } catch (err) {
        this.errorHandler(err)
      }
    },
    login() {
      this.$refs.loginForm.validate().then(() => {
        // this.formData.key_str = this.authCode.key
        this.captcha()
      })
    },
    // 跳转官网
    websiteBtn() {
      window.open('http://www.cdbottle.com/')
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
